<!--
  Generated template for the ChargingListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>充电记录</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list>
    <ion-list-header>
      本月
    </ion-list-header>
    <p *ngIf="charglist.length <= 0" style="font-size: 1.4rem;line-height: 2;padding: 0px 0px 10px 15px;color: #8e9093;">暂无数据</p>
    <ion-item *ngFor="let data of charglist">
      <div class="C-list-item-start" item-start text-center>

        <img src="assets/imgs/icon-account-circle.png" alt="" *ngIf="data.payment_id === '4'" />
        <p class="icon-note" *ngIf="data.payment_id === '4'">
          账户余额
        </p>

        <img src="assets/imgs/icon-weixin-circle.png" alt="" *ngIf="data.payment_id === '1'" />
        <p class="icon-note" *ngIf="data.payment_id === '1'">
          微信
        </p>

        <img src="assets/imgs/icon-zhifubao-circle.png" alt="" *ngIf="data.payment_id === '2'" />
        <p class="icon-note" *ngIf="data.payment_id === '2'">
          支付宝
        </p>

        <img src="assets/imgs/icon-bendi-circle.png" alt="" *ngIf="data.payment_id === '3'" />
        <p class="icon-note" *ngIf="data.payment_id === '3'">
          本地余额
        </p>

      </div>
      <div class="C-list-item-content">
        <p class="node-address" *ngIf="data.q_charging_pile">
          {{data.q_charging_pile.chargingpile.charging_pile_name}}
        </p>
        <p class="charging-date">
          <span class="ymd">{{(data.charge_time_start * 1000) | date : 'yyyy-MM-dd HH:mm:ss'}}</span>
        </p>
      </div>
      <div class="C-list-item-end" item-end text-right>
        <p>
          <span class="charging-cost">￥{{data.order_money | number : '1.2-2'}}</span>
          <span class="charging-time">{{data.charge_time}}小时</span>
        </p>

        <button *ngIf="data.remaining_time <= 0" ion-button outline (click)="skipToComplain(data)">申述</button>
        <span class="charging-time"*ngIf="data.remaining_time > 0" >剩余时间:{{data.remaining_time}}分钟</span>

      </div>
    </ion-item>

    <!--<ion-item>
     <div class="C-list-item-start" item-start text-center>
       <img src="assets/imgs/icon-weixin-circle.png" alt="" />
       <p class="icon-note">
         微信
       </p>
     </div>
     <div class="C-list-item-content">
       <p class="node-address">
         南宁广告产业园负一楼
       </p>
       <p class="charging-date">
         <span class="ymd">2018-03-16</span>15:02:00
       </p>
     </div>
     <div class="C-list-item-end" item-end text-center>
       <p>
         <span class="charging-cost">5.00</span>
         <span class="charging-time">4.5小时</span>
       </p>
       <button ion-button outline>申述</button>
     </div>
   </ion-item>

   <ion-item>
     <div class="C-list-item-start" item-start text-center>
       <img src="assets/imgs/icon-zhifubao-circle.png" alt="" />
       <p class="icon-note">
         支付宝
       </p>
     </div>
     <div class="C-list-item-content">
       <p class="node-address">
         南宁广告产业园负一楼
       </p>
       <p class="charging-date">
         <span class="ymd">2018-03-16</span>15:02:00
       </p>
     </div>
     <div class="C-list-item-end" item-end text-center>
       <p>
         <span class="charging-cost">5.00</span>
         <span class="charging-time">4.5小时</span>
       </p>
       <button ion-button outline>申述</button>
     </div>
   </ion-item>-->

  </ion-list>
  <ion-list *ngIf="charglistold.length > 0">
    <ion-list-header>
      历史
    </ion-list-header>

    <ion-item *ngFor="let data of charglistold">
      <div class="C-list-item-start" item-start text-center>

        <img src="assets/imgs/icon-account-circle.png" alt="" *ngIf="data.payment_id === '4'" />
        <p class="icon-note" *ngIf="data.payment_id === '4'">
          账户余额
        </p>

        <img src="assets/imgs/icon-weixin-circle.png" alt="" *ngIf="data.payment_id === '1'" />
        <p class="icon-note" *ngIf="data.payment_id === '1'">
          微信
        </p>

        <img src="assets/imgs/icon-zhifubao-circle.png" alt="" *ngIf="data.payment_id === '2'" />
        <p class="icon-note" *ngIf="data.payment_id === '2'">
          支付宝
        </p>


      </div>
      <div class="C-list-item-content">
        <p class="node-address">
          {{data.q_charging_pile.chargingpile.charging_pile_name}}
        </p>
        <p class="charging-date">
          <span class="ymd">{{(data.charge_time_start * 1000) | date : 'yyyy-MM-dd HH:mm:ss'}}</span>
        </p>
      </div>
      <div class="C-list-item-end" item-end text-right>
        <p>
          <span class="charging-cost">￥{{data.payment_money | number : '1.2-2'}}</span>
          <span class="charging-time">{{data.charge_time}}小时</span>
        </p>
        <button ion-button outline (click)="skipToComplain(data)">申述</button>
      </div>
    </ion-item>
    <ion-thumbnail *ngIf="nodata === 1">
      <p class="font-home">没有更多了~</p>
    </ion-thumbnail>
    <ion-thumbnail *ngIf="nodata !== 1" (click)="lode($event,'text')">
      <p class="font-home">下拉加载</p>
    </ion-thumbnail>
    
    <!--<ion-item>
     <div class="C-list-item-start" item-start text-center>
       <img src="assets/imgs/icon-account-circle.png" alt="" />
       <p class="icon-note">
         账户余额
       </p>
     </div>
     <div class="C-list-item-content">
       <p class="node-address">
         南宁广告产业园负一楼
       </p>
       <p class="charging-date">
         <span class="ymd">2018-03-16</span>15:02:00
       </p>
     </div>
     <div class="C-list-item-end" item-end text-center>
       <p>
         <span class="charging-cost">5.00</span>
         <span class="charging-time">4.5小时</span>
       </p>
       <button ion-button outline>申述</button>
     </div>
   </ion-item>

   <ion-item>
     <div class="C-list-item-start" item-start text-center>
       <img src="assets/imgs/icon-bendi-circle.png" alt="" />
       <p class="icon-note">
         本地余额
       </p>
     </div>
     <div class="C-list-item-content">
       <p class="node-address">
         南宁广告产业园负一楼
       </p>
       <p class="charging-date">
         <span class="ymd">2018-03-16</span>15:02:00
       </p>
     </div>
     <div class="C-list-item-end" item-end text-center>
       <p>
         <span class="charging-cost">5.00</span>
         <span class="charging-time">4.5小时</span>
       </p>
       <button ion-button outline>申述</button>
     </div>
   </ion-item>

   <ion-item>
     <div class="C-list-item-start" item-start text-center>
       <img src="assets/imgs/icon-account-circle.png" alt="" />
       <p class="icon-note">
         账户余额
       </p>
     </div>
     <div class="C-list-item-content">
       <p class="node-address">
         南宁广告产业园负一楼
       </p>
       <p class="charging-date">
         <span class="ymd">2018-03-16</span>15:02:00
       </p>
     </div>
     <div class="C-list-item-end" item-end text-center>
       <p>
         <span class="charging-cost">5.00</span>
         <span class="charging-time">4.5小时</span>
       </p>
       <button ion-button outline>申述</button>
     </div>
   </ion-item>-->

  </ion-list>

    <ion-infinite-scroll *ngIf="nodata !== 1" (ionInfinite)="lode($event,'scroll')">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>